﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Album.aspx.cs" Inherits="Token.Piker.Web.Album" %>

<%@ Register TagPrefix="uc" TagName="ucHead" Src="~/uc/head.ascx" %>
<%@ Register TagPrefix="uc" TagName="ucFoot" Src="~/uc/foot.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>皮壳网</title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/singlePhoto.css" rel="stylesheet" type="text/css" />
    <link href="js/fancyapps-fancyBox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <script src="js/fancyapps-fancyBox/lib/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/fancyapps-fancyBox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/autoTextarea.js"></script>
</head>
<body>
    <!---头部--->
    <uc:ucHead ID="ucHeader" runat="server" />
    <!---头部结束--->
    <!---正文--->
    <div class="main_box">
        <div class="main">
            <div class="content">
                <div class="column">
                    <%--<img id="UserPic" src="<%=UserModel.UserPic%>" width="55" height="55" alt="头像"/>--%>
                    <img id="UserPic" src="../Images/youke.jpg" width="55" height="55" alt="头像" />
                    <span class="albumInfo" id="albumInfo" title="<%=AlbumModel.ID %>"><span><a href="#name"
                        class="albumdetails">
                        <%=UserModel.UserName %></a> 上传于 <a href="#time"><span class="albumtime">
                            <%=string.Format("{0:f}", AlbumModel.CreateTime) %></span></a>&nbsp;&nbsp;&nbsp;
                        属于&nbsp;<a href="#" class="albumdetails"><%=Album_Tag %></a>&nbsp;分类 </span>
                        <br />
                        <span><span class="albumname">
                            <%=AlbumModel.AlbumName %></span> @ <a href="#" class="albumdetails">
                                <%=Album_position %></a> </span></span>
                </div>
                <div class="albumdesc">
                    相册描述：<%=AlbumModel.Descrip %>
                </div>
                <div id="title" class="title">
                    <asp:Repeater ID="Photo_rpt" runat="server">
                        <ItemTemplate>
                            <div id="album" class="album">
                                <div class="albumposition">
                                    <span style="padding: 2px 10px 0px 0px;">#<%#Container.ItemIndex+1%></span> <span>拍摄于：<font
                                        class="albumdetails"><%#Eval("Province")%>&nbsp;
                                        <%#Eval("City")%>&nbsp;<%#Eval("Position")%></font></span>
                                </div>
                                <span id="photo_list" class='photo-list'>
                                    <img class="lazy" id='<%#Eval("ID").ToString() %>' lazy-src="../Images/placeholder.png"
                                        src="<%#"/AJAX/Thumbnail.ashx?pid="+Eval("ID").ToString()+"&width=660&height=800" %>"
                                        alt="<%#Eval("Descrip") %>" style="max-width: 700px;" />
                                    <div class="photoInfo">
                                        <div class='vote'>
                                            <img src="../Images/hreat.png" alt='picture' width="16px" height="16px" />
                                            <span class='liked'>
                                                <%#Eval("LikeCount") %></span>
                                        </div>
                                        <div class='para'>
                                            <ul>
                                                <li>相机：<%#Eval("Make") %></li>
                                                <li>型号：<%#Eval("Model") %></li>
                                                <li>相机软件：<%#Eval("Software") %></li>
                                                <!--	<li>焦距：</li>-->
                                                <li>光圈：<%#Eval("FNumber") %></li>
                                                <li>曝光时间：<%#Eval("ExposureTime") %></li>
                                                <!--<li>快门数度：</li>-->
                                                <li>ISO：<%#Eval("ISO") %>></li>
                                                <li>曝光补偿：<%#Eval("ExposureBiasValue")%></li>
                                            </ul>
                                        </div>
                                        <div class="blank">
                                        </div>
                                        <p class="photo-tip" align="center">
                                            exif</p>
                                    </div>
                                </span>
                                <div class="statement" clicked='0'>
                                    <font style="color: green; font-weight: bolder;">DESC：</font>
                                    <p class='description'>
                                        <%#Eval("Descrip")%></p>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div class="link">
                    <dl>
                        <dt>
                            <p>
                                较早的一辑：<a href='<%=nextSRC %>' target="_blank"><%=nextAlbum.AlbumName%></a></p>
                            <p>
                                较旧的一辑：<a href='<%=preSRC %>' target="_blank"><%=preAlbum.AlbumName%></a></p>
                        </dt>
                    </dl>
                </div>
            </div>
            <div class="comment fix">
                <div class="comment_l fix">
                    <div class="ping">
                        <font size="5" color="#a9a9a9">评论</font></div>
                    <div class="cmt_1 fix">
                        <div class="cmt_ll">
                            <ul>
                                <li>
                                    <img src="<%=UserPic%>" width="55px" height="55px" /></li>
                                <li id="name">
                                    <%=UserName %></li>
                            </ul>
                        </div>
                        <div id="Pcontent" class="cmt_l2">
                            <textarea id="text" rows="3" cols="70" style="resize: none; max-height: none; overflow-y: hidden;
                                line-height: 16px;"></textarea>
                            <a href="#comment">
                                <img src="../Images/fabiao.jpg" id="bt" alt="点我发表！" /></a>
                            <script type="text/javascript">
                                var text = document.getElementById("text");
                                autoTextarea(text); // 调用
                            </script>
                        </div>
                    </div>
                    <div id="comment_list">
                    </div>
                </div>
                <div class="comment_r">
                    <ul>
                        <li>分享此照片到：</li>
                    </ul>
                    <ul>
                        <li><a href="#">
                            <img src="../Images/ren.png" /></a></li>
                        <li><a href="#">
                            <img src="../Images/kong.png" /></a></li>
                        <li><a href="#">
                            <img src="../Images/lang.png" /></a></li>
                        <li><a href="#">
                            <img src="../Images/teng.png" /></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!---底部--->
    <uc:ucFoot ID="ucFooter" runat="server" />
    <!---底部结束--->
    <!---登录区域--->
    <div id="div_login" style="display: none">
        <div id="div_login_title">
            <h2>登录到皮壳网</h2>
        </div>
        <div id="login_content">
            <p>
                <label for="userName">
                    用户名：</label>
                <input class="text" type="text" name="username" id="username" />
            </p>
            <p>
                <label for="password">
                    密码：</label>
                <input class="text" type="password" name="password" id="password" />
            </p>
            <p>
                <input class="button" type="button" value="登录" id="btnSubmit" />
                <a id="anchor_create_account" href="Register.aspx">没有账号？立即注册</a>
            </p>
        </div>
    </div>
    <!---登录区域结束--->
    <script src="js/login.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/lazyload/jquery.js"></script>
    <script type="text/javascript" src="js/lazyload/jquery.lazyload.js"></script>
    <script type="text/javascript">

        var $User_ID = $("#u_id").attr("title");
        var $album_id = $("#albumInfo").attr("title");
        var $user_name = $("#name").val();
        var $comment_area = $("#Pcontent").find("textarea");
        //autoTextarea($comment_area, 20, 800);
        /// <summary>
        /// 将Json序列化的时间由/Date(1294499956278+0800)转为字符串
        /// </summary>
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            //var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return date.getFullYear() + "年" + month + "月" + day + "日   " + hour + ":" + minute; //+ ":" + second;
        }

        jQuery(function ($) {
            //鼠标悬停
            $('img.lazy').mouseover(function () {
                $(this).parent('span').find('div.vote').css('opacity', '0.8');
                $(this).parent('span').find('div.photo-tip').css('opacity', '0.8');
                $(this).parent('span').find('p.photo-tip').css('opacity', '0.8');
            });
            $('span.photo-list').mouseover(function () {
                $(this).find('div.vote').css('opacity', '0.8');
                $(this).find('div.photo-tip').css('opacity', '0.8');
                $(this).find('p.photo-tip').css('opacity', '0.8');
            });
            $('div.photoInfo').mouseover(function () {
                $(this).find('div.vote').css('opacity', '0.8');
                $(this).find('div.photo-tip').css('opacity', '0.8');
                $(this).find('p.photo-tip').css('opacity', '0.8');
            });
            //鼠标移除
            $('img.lazy').mouseout(function () {
                $(this).parent('span').find('div.vote').css('opacity', '0.0');
                $(this).parent('span').find('div.photo-tip').css('opacity', '0.0');
                $(this).parent('span').find('p.photo-tip').css('opacity', '0.0');
            });
            $('span.photo-list').mouseout(function () {
                $(this).find('div.vote').css('opacity', '0.0');
                $(this).find('div.photo-tip').css('opacity', '0.0');
                $(this).find('p.photo-tip').css('opacity', '0.0');
            });
            $('div.photoInfo').mouseout(function () {
                $(this).find('div.vote').css('opacity', '0.0');
                $(this).find('div.photo-tip').css('opacity', '0.0');
                $(this).find('p.photo-tip').css('opacity', '0.0');
            });

            //显示exif信息

            $('p.photo-tip').mouseover(function () {
                $(this).parent('div').find('div.para').css('opacity', '0.8');
                $(this).parent('div').find('div.blank').css('opacity', '0.8');
            });
            $('p.photo-tip').mouseout(function () {
                $(this).parent('div').find('div.para').css('opacity', '0.0');
                $(this).parent('div').find('div.blank').css('opacity', '0.0');
            });

            $('div.vote').click(function () {
                var img_id = $(this).parent('div').parent('span').find("img.lazy").attr("id");
                SubmitLikeNum(img_id);
            });
            $('#sumbit').mousedown(function () {
                $(this).css('opacity', '0.8');
            });
            $('#sumbit').mouseup(function () {
                $(this).css('opacity', '1');
                //ajax here **********
            });

            //相册评论按钮
            $("img[id=bt]").click(function () {
                var $content = $comment_area.val().replace(/</g, '&lt;').replace(/>/g, '&gt;');
                SubmitAComment($album_id, $User_ID, $content, $user_name);
                AcommentBind($album_id);
            });
            //加载相册评论
            AcommentBind($album_id);

            $comment_area.blur(function () {
                if ($(this).val() === '') {
                    $(this).val('在此写下您的评论，Ctrl+Enter快速发表！');
                }
            });
            $comment_area.focus(function () {
                if ($(this).val() === '在此写下您的评论，Ctrl+Enter快速发表！') {
                    $(this).val('');
                }
            });

            //$('div.statement').click(function () {
            //    if ($(this).attr('clicked') == '0') {
            //        $(this).children().eq(0).html('<font color="#ffca00">[+]..............[+]</font>');
            //        $(this).children().eq(1).fadeOut();
            //        $(this).attr('clicked', '1');
            //    }
            //    else {
            //        $(this).children().eq(0).html("照片描述：");
            //        $(this).children().eq(1).fadeIn();
            //        $(this).attr('clicked', '0');
            //    }
            //});
            //$('p').each(function () {
            //    $(this).mousedown(function () {
            //        $(this).css('color', '#ca00ff');
            //    });
            //    $(this).mouseup(function () {
            //        $(this).css('color', '#ff0000');
            //    });
            //});
            //$('p.response').click(function () {
            //    $(this).next().css('display', 'block');
            //});

            //$('div.publish').find('img').click(function () {
            //    sendData($(this).parent().find('textarea'), 1);
            //});
            //$('button.confirm').click(function () {
            //    sendData($(this).parent().prev(), 2);
            //    $(this).parent().parent().css('display', 'none');
            //});
            //$('button.cancel').click(function () {
            //    $(this).parent().prev().attr('value', '');
            //    $(this).parent().parent().css('display', 'none');
            //});

        });

        //相册评论加载
        function AcommentBind(album_id) {
            $.ajax({
                url: "../AJAX/Single.ashx",
                type: 'POST',
                data: { Album_ID: album_id, f_id: "ACB" }, //tparm,
                dataType: "json",
                success: function (json) {
                    $("#comment_list").empty();
                    if (json != null) {
                        for (var i = 0; i < json.length; i++) {
                            $("<div class='comment_ls fix'><div class='cmt_ll fix'><img src='" + json[i].UserPic + "' width='55px' height='55px'/></div><div class='reply'><ul><li><span id='names'>" + json[i].UserName + "</span>" + ChangeDateFormat(json[i].AComment.CommentTime) + "</li><li>" + json[i].AComment.Content + "</li><li><a href='#Pcontent'>回复</a></li></ul>	</div></div>").appendTo("#comment_list");
                        }
                    }
                }
            })
        }

        //评论
        function SubmitAComment(album_id, user_id, content, user_name) {
            if (user_name != null && user_name != "" && user_name != "游客") {
                if (content != null && content != "" && content != "在此写下您的评论，Ctrl+Enter快速发表！") {
                    $.ajax({
                        url: "../AJAX/Single.ashx",
                        type: 'POST',
                        data: { Album_ID: album_id, User_ID: $User_ID, Content: content, f_id: "ACO" }, //tparm,
                        dataType: "json",
                        success: function (json) {
                            if (json != null && json.success == "true") {
                                alert("评论成功提交！");
                                PcommentBind(json.Id_img);
                                $comment_area.val("在此写下您的评论，Ctrl+Enter快速发表！");
                            }
                            else {
                                alert("未登录或网络故障，请重试！");
                            }
                        }
                    })
                } else {
                    alert("内容不能为空，请输入评论内容！");
                }
            }
            else {
                alert("请先登录再评论！");
            }
        }

        //显示喜欢数据
        function SubmitLikeNum(img_id) {
            $.ajax({
                url: "../AJAX/Single.ashx",
                type: 'POST',
                data: { photo_ID: img_id, f_id: "SLN" }, //tparm,
                dataType: "json",
                success: function (json) {
                    if (json != null && json.success == "true") {
                        $('img[id=' + img_id + ']').parent('span').find('span.liked').html(json.Id_img);
                        alert("您已成功喜欢这张图片！");
                    }
                    else {
                        alert("未登录或网络故障，请重试！");
                    }
                }
            })
        }
    </script>
</body>
</html>
